import { useHistory } from "react-router";
import { Form, Input, Button, Card, message } from 'antd';
import { UserOutlined, LockOutlined ,PhoneOutlined} from '@ant-design/icons';
import AdminsApi from "../../api/admins";

//eslint-disable-next-line
export default () => {
    let history = useHistory();

    const onFinish = async (values) => {
        const { adminName, adminPassword,phone } = values;
        const status = await AdminsApi.reg({ adminName, adminPassword,phone });
        console.log(status);
        if (status) {
            message.success("注册成功，即将跳转...", 1, () => {
                console.log(adminName);
                history.push(`/login/${adminName}`)
            });
        }else {
            message.error('输入错误！请重新登录！');
        }
    };

    return (
        <div className="components-form-demo-normal-login" style={{ height: "100vh", backgroundColor: "#f2f2f2", paddingTop: "50px" }}>
            <Card title="注册" bordered={true} style={{ width: 400, margin: "auto" }}>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="adminName"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名！',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="设置用户名" />
                    </Form.Item>
                    <Form.Item
                        name="adminPassword"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="设置密码"
                        />
                    </Form.Item>
                    <Form.Item
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请绑定手机号！',
                            },
                        ]}
                    >
                        <Input
                            prefix={<PhoneOutlined />}
                            placeholder="绑定手机号"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            立即注册
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>)
}